<template>
	<view>
		<view class="navView">
			<view class="navItem" v-for="(item, index) in navList" :key="index" @click="navClick(index)">
				<text>{{ item }}</text>
				<i class="iconfont iconxiala"></i>
			</view>
		</view>
		<view class="pop" v-if="isArr" @tap="closeALL">
			<scroll-view scroll-y="true" :class="arr.length >= 10 ? 'popView' : 'popShort'">
				<view>
					<view class="popItem" :class="arrIndex == index ? 'popActive' : ''" v-for="(item, index) in arr" :key="index" @tap.stop="itemClick(index)">{{ item }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="not_data" v-if="dataList.length == 0">
			<i class="iconfont iconzanwukecheng"></i>
			<view class="not_data_text">当前暂无课表</view>
		</view>
		<view v-else class="table">
			<view class="table-tr">
				<view class="table-td">
					<view class="sub-table">
						<view class="sub-table-tr">
							<view class="table-th">
								<view class="date">日期</view>
								<view class="time">时段</view>
							</view>
							<view class="table-th" v-for="(item, index) in dayList" :key="index">
								<view class="th-top">{{ item.name }}</view>
								<view class="th-bottom">{{ item.time }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="table-tr" v-if="dataList.length > 0" v-for="(value, index) in dataList" :key="index">
				<view class="table-td">
					<view class="sub-table">
						<view class="sub-table-tr">
							<!-- 第一列 -->
							<view class="sub-table-td">
								<view>{{ value.coumlNum }}</view>
								<view>{{ value.timeStart }}</view>
								<view>-</view>
								<view>{{ value.timeEnd }}</view>
							</view>
							<!-- 第一列 -->
							<!-- 第二列开始循环 -->
							<!-- 午休 -->
							<view class="sub-table-td wuxi" v-if="value.weekList == null">{{ value.timeName }}</view>
							<!-- 午休 -->
							<view
								v-else
								class="sub-table-td"
								:style="
									val.End < time
										? 'color:#000000;'
										: val.Start < time && time < val.End
										? 'background:#00d5a2; color:#ffffff;'
										: val.Start > time
										? 'color:#00d5a2;'
										: ''
								"
								v-for="(val, weekindex) in value.weekList"
								:key="weekindex"
								@click="show(index, weekindex)"
							>
								<view v-if="val.state != 5 && val.state != 6" class="subject">{{ val.subjectName }}</view>
								<view
									v-if="val.subjectName != '-' && val.overTime == 1"
									class="yuan"
									:style="
										val.isArrive && val.arriveType == 2
											? 'background:#FF9900'
											: val.isArrive && val.arriveType == 1
											? 'background:#00D5A2'
											: 'background:#FF7171'
									"
								></view>
							</view>
							<!-- 第二列开始循环 -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';
export default {
	data() {
		return {
			time: +new Date(),
			navList: ['班级名称', '学期名称', '周名称'],
			navIndex: 0,

			parent_id: '', //机构id
			classList: [], //班级列表
			groupid: '', //班级ID

			yearList: [], //学期列表
			yearId: '', //学期ID
			weekList: [], //周列表
			weekId: '', //周期ID

			arr: [], //模态框列表
			arrIndex: 0, //模态框索引
			isArr: false, //模态框是否出现
			// now_day: new Date().getMonth() + 1 + '.' + new Date().getUTCDate(), // 获取当天时间，用来区分每次选择周数如果刚好对应今天则给他一个激活字体样式

			dayList: [
				{
					name: '周一',
					dayId: 1
				},
				{
					name: '周二',
					dayId: 2
				},
				{
					name: '周三',
					dayId: 3
				},
				{
					name: '周四',
					dayId: 4
				},
				{
					name: '周五',
					dayId: 5
				},
				{
					name: '周六',
					dayId: 6
				},
				{
					name: '周日',
					dayId: 7
				}
			],
			dataList: [],
			timeList: [], //获取回来的时间段
			timecouml: [], //处理后的时间段
			coursesList: [] //课程表
		};
	},
	props: {
		stu_id: Number,
		classroom_id: Number,
		group_type: Number,
		snvueform:String
	},
	created() {},
	methods: {
		/* 获取孩子班级列表 */
		getClass: function() {
			let obj = {}
			if (this.classroom_id) {
				// 家长管理下的私塾
				obj.group_type = 2
				obj.classroom_id =  this.classroom_id
			} else if (this.group_type) {
				// 选中的孩子私塾课表
				obj.group_type = this.group_type
				obj.student_id = this.stu_id
			} else {
				// 普通课表
				obj.student_id =  this.stu_id
			}
			this.$zapi
				.apiPost('user/Grade.User/GradeList', obj)
				.then(res => {
					if (res.data.code == 200 && res.data.data) {
						this.classList = res.data.data;
						var groupid = uni.getStorageSync('groupid');
						var index=0;
						for (let i = 0; i < this.classList.length; i++) {
							if (this.classList[i].groupid == groupid) {
								 index= i;
								break;
							}
						}
						this.navList[0] = this.classList[index].group_name;
						this.$forceUpdate();
						this.parent_id = this.classList[index].parent_id;
						this.groupid = this.classList[index].groupid;
						if (this.parent_id) {
							this.getYear(); //获取学期
							//获取时段
							// this.getDayTime();
						}
					} else {
						this.classList = [];
					}
				});
		},
		//获取学期
		getYear: function() {
			var data = {
				schoolId: this.parent_id,
				reqMethod: 2,
				pageSize: 99
			};
			var url = 'schoolYear/selSchoolYearBySchoolId';
			this.getData(url, data, 'Year');
		},
		//获取周列表
		getweekList: function() {
			var data = {
				schoolId: this.parent_id,
				reqMethod: 2,
				yearId: this.yearId,
				page: 1,
				pageSize: 99
			};
			var url = 'week/selWeekAll';
			// var data = {
			// 	schoolId: this.parent_id,
			// 	reqMethod: 2,
			// 	yearId: this.yearId
			// }
			// var url = 'week/selWeekByChoose';
			this.getData(url, data, 'weekList');
		},
		//获取时段列表
		getDayTime: function() {
			// var data = {
			// 	schoolId: this.parent_id,
			// 	reqMethod: 2
			// };
			// var url = 'daytime/selAllDayTime';
			// this.getData(url, data, 'Daytime');
			var data = {
				typeId: this.typeId,
				reqMethod: 2
			};
			var url = 'time/selTimeByTimeTypeId';
			this.getData(url, data, 'Daytime');
		},
		// 获取课程数据
		getCourses: function() {
			var data = {
				schoolId: this.parent_id,
				classId: this.groupid,
				stuId: this.stu_id,
				reqMethod: 2,
				yearId: this.yearId
			};

			if (this.weekId) {
				data.weekId = this.weekId;
			}
			var url = 'course/selCourseForStudent';
			this.getData(url, data, 'courses');
		},
		//请求获取数据
		getData: function(url, data, type) {
			this.dataList = [];
			// uni.showLoading({
			// 	title: '加载中...',
			// 	mask: true
			// })
			var _this = this;
			this.$capi.apiPost(url, data).then(res => {
				if (res.data.code == 200) {
					_this.setData(res.data.data, type);
				} else {
					_this.setData([], type);
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
				// uni.hideLoading();
			});
		},
		// 处理数据
		setData: function(data, type) {
			switch (type) {
				case 'Year':
					this.yearList = [];
					if (data.obj) {
						this.yearList = data.obj;
						var isyear = true;
						this.yearList.forEach((item, key) => {
							var yearStart = +new Date(item.yearStart.replace(/\-/g, '/') + ' 00:00:00');
							var yearEnd = +new Date(item.yearEnd.replace(/\-/g, '/') + ' 23:59:59');
							var date = +new Date();
							if (yearStart < date && date < yearEnd) {
								isyear = false;
								this.navList[1] = item.yearName;
								this.yearId = item.yearId;
								this.getweekList();
							}
						});
						if (isyear && this.yearList.length > 0) {
							this.navList[1] = this.yearList[0].yearName;
							this.yearId = this.yearList[0].yearId;
							this.getweekList();
						}
					}
					// this.yearList = [];
					// if (data.obj) {
					// 	this.yearList = data.obj;
					// 	// this.navList[1] = "选择学期";
					// 	// this.navList[2] = "本周";
					// 	// var date = new Date();
					// 	// var time = date.format("yyyy-MM-dd HH:mm:ss");
					// 	// this.setDaytime(time);
					// 	// this.getCourses();
					// 	this.navList[1] = data.obj[0].yearName;
					// 	this.yearId = data.obj[0].yearId;
					// 	//获取周列表
					// 	this.getweekList();
					// }
					break;
				case 'weekList':
					this.weekList = data.obj;
					if (this.weekList) {
						var isweek = true;
						this.weekList.forEach((item, key) => {
							var weekStart = +new Date(item.weekStart.replace(/\-/g, '/') + ' 00:00:00');
							var weekEnd = +new Date(item.weekEnd.replace(/\-/g, '/') + ' 23:59:59');
							var date = +new Date();
							if (weekStart < date && date < weekEnd) {
								isweek = false;
								this.navList[2] = item.weekName;
								this.weekId = item.weekId;
								this.setDaytime(item.weekStart);
								this.getCourses();
							}
						});
						if (isweek && this.weekList.length > 0) {
							this.navList[2] = this.weekList[0].weekName;
							this.weekId = this.weekList[0].weekId;
							this.setDaytime(this.weekList[0].weekStart);
							this.getCourses();
						}
					}
					// this.weekList = data.obj;
					// if (data.obj.length > 0) {
					// 	this.navList[2] = data.obj[0].weekName;
					// 	this.weekId = data.obj[0].weekId;
					// 	this.setDaytime(data.obj[0].weekStart);
					// 	this.getCourses();
					// }
					break;
				case 'Daytime':
					this.timeList = data;
					this.repTime();
					break;
				case 'courses':
					this.coursesList = data;
					if (data.length > 0) {
						this.typeId = data[0]['time'].typeId;
						//获取时段
						this.getDayTime();
					}
			}
			this.$forceUpdate();
		},
		//处理星期一到星期天时间
		setDaytime: function(weekStart) {
			var currentDate = new Date(weekStart.replace(/\-/g, '/'));
			var timesStamp = currentDate.getTime();
			var currenDay = currentDate.getDay();
			var dates = [];
			for (var i = 0; i < 7; i++) {
				dates.push(util.getLeftTime(timesStamp + 24 * 60 * 60 * 1000 * (i - ((currenDay + 6) % 7))));
			}
			var days = dates.map((item, index) => {
				this.dayList[index]['time'] = item.substr(5).replace(/\-/g, '.');
				return this.dayList[index];
			});
		},

		// 处理时段数据
		repTime: function() {
			// var time = [];
			// this.timeList.forEach((item, index) => {
			// 	item.times.forEach((val, id) => {
			// 		var obj = {
			// 			timeStart: val.timeStart,
			// 			timeEnd: val.timeEnd,
			// 			timeId: val.timeId
			// 		};
			// 		time.push(obj);
			// 	});
			// 	var startlength = this.timeList[index]['times'].length;
			// 	if (this.timeList[index + 1]) {
			// 		var endlength = this.timeList[index + 1]['times'].length;
			// 		if (endlength != 0) {
			// 			var obj = {
			// 				timeStart: this.timeList[index]['times'][startlength - 1]['timeEnd'],
			// 				timeEnd: this.timeList[index + 1]['times'][0]['timeStart'],
			// 				timeId: null,
			// 				timeName: index == 0 ? '午休' : '傍晚'
			// 			};
			// 			time.push(obj);
			// 		}
			// 	}
			// });
			// this.timecouml = time;
			this.timecouml = this.timeList;
				this.setcoursData();
		},
		setcoursData: function() {
			var coumlNum = 1;
			this.timecouml.map((item, index) => {
				item.timeEnd = item.timeEnd.slice(0, 5);
				item.timeStart = item.timeStart.slice(0, 5);
				if (item.timeId == null) {
					item['weekList'] = null;
				} else {
					var weekList = [];
					this.dayList.forEach((value, dayindex) => {
						var obj = {};
						obj.subjectName = '-';
						this.coursesList.forEach((val, cindex) => {
							if (val.time.timeId == item.timeId && val.dayId == value.dayId) {
								obj = val;
								obj.Start = +new Date(val.courseDay.replace(/\-/g, '/')+' '+val.time.timeStart);
								obj.End = +new Date(val.courseDay.replace(/\-/g, '/')+' ' +val.time.timeEnd );
								if (obj.isArrive) {
									obj.isArrive = JSON.parse(obj.isArrive);
								}
							}
						});
						weekList.push(obj);
					});
					item['weekList'] = weekList;
					item['coumlNum'] = coumlNum++;
				}
			});
			this.dataList = this.timecouml;
		},
		/* pop切换 */
		navClick(index) {
			this.isArr = true;
			this.navIndex = index;
			var arr = [];
			this.arr = [];
			switch (index) {
				case 0:
					if (this.classList.length > 0) {
						for (var i = 0; i < this.classList.length; i++) {
							arr.push(this.classList[i].group_name);
						}
						this.arr = arr;
					} else {
						uni.showToast({
							title: '该生还没有加入任何班级',
							icon: 'none'
						});

						this.isArr = false;
					}
					break;
				case 1:
					if (this.yearList.length > 0) {
						for (var i = 0; i < this.yearList.length; i++) {
							arr.push(this.yearList[i].yearName);
						}
						this.arr = arr;
					} else {
						uni.showToast({
							title: '该班级还没有添加学期',
							icon: 'none'
						});

						this.isArr = false;
					}
					break;
				case 2:
					if (this.weekList.length > 0) {
						for (var i = 0; i < this.weekList.length; i++) {
							arr.push(this.weekList[i].weekName);
						}
						this.arr = arr;
					} else {
						uni.showToast({
							title: '该班级还没有添加周期',
							icon: 'none'
						});

						this.isArr = false;
					}
					break;
			}
			for (var i = 0; i < this.arr.length; i++) {
				if (this.navList[this.navIndex] == this.arr[i]) {
					this.arrIndex = i;
				}
			}
		},
		/* 关闭蒙版 */
		closeALL() {
			this.isArr = false;
		},
		/* popItem切换 */
		itemClick(index) {
			this.navList[this.navIndex] = this.arr[index];
			switch (this.navIndex) {
				case 0:
					this.parent_id = this.classList[index].parent_id;
					this.groupid = this.classList[index].groupid;
					uni.setStorageSync('groupid', this.groupid);
					uni.setStorageSync('groupname', this.classList[index].group_name);
					uni.setStorageSync('parentid', this.parent_id);
					this.weekList = [];
					this.yearList = [];
					this.dataList = [];
					this.navList[1] = '学期名称';
					this.navList[2] = '周名称';
					this.yearId ='';
					this.weekId='';
					if (this.parent_id) {
						this.getYear(); //获取学期
						//获取时段
						// this.getDayTime();
					} else {
						uni.showToast({
							title: '该班级还没加入机构',
							icon: 'none'
						});
					}
					break;
				case 1:
					this.yearId = this.yearList[index].yearId;
					this.weekId='';
					this.navList[2] = '周名称';
					this.weekList = [];
					this.dataList = [];
					this.getweekList();
					break;
				case 2:
					this.weekId = this.weekList[index].weekId;
					this.dataList = [];
					this.setDaytime(this.weekList[index].weekStart);
					this.getCourses();
					break;
			}
			this.isArr = false;
			this.$forceUpdate();
		},
		show: function(index, weekindex) {
			var data = this.dataList[index].weekList[weekindex];
			data.time.timeStart = data.time.timeStart.slice(0, 5);
			data.time.timeEnd = data.time.timeEnd.slice(0, 5);
			var _this = this;
			//#ifdef APP-PLUS
			const subNVue = uni.getSubNVueById(this.snvueform);
			// 弹出确认框
			subNVue.show('none', 300, function() {});
			// subNVue.postMessage({
			// 	data: data,
			// 	groupid: _this.groupid
			// });
			uni.$emit(this.snvueform, {
				data: data,
				groupid: _this.groupid,
				groupname: _this.navList[_this.navIndex]
			});

			//#endif
		}
	},
	mounted() {
		var that = this;
		this.$on('bridge', () => {
			that.getClass();
		});
	},
	watch: {
		stu_id: {
			immediate: true,
			handler(val) {
				this.getClass();
			}
		},
		group_type: {
			immediate: true,
			handler(val) {
				this.getClass();
			}
		}
	}
};
</script>

<style lang="scss">
.not_data {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.not_data i {
	margin-top: 20upx;
	font-size: 400upx;
	line-height: 300upx;
	color: rgba(229, 229, 229, 1);
}

.not_data_text {
	color: #c2c2c2;
	font-size: 42upx;
	line-height: 40upx;
}

/* 课表 */
.tableView {
	margin: -48upx auto 20upx;
	width: 690upx;
	border-radius: 20upx;
	background: #ffffff;
}

.navView {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 10upx;
	margin-bottom: 30upx;
}

.navItem {
	width: 33.3%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.navItem text {
	width: 75%;
	color: #333333;
	font-size: 30upx;
	padding-left: 10upx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* pop */
.pop {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
}

.popView {
	width: 80%;
	height: 70%;
	border-radius: 50upx;
	background: #ffffff;
	overflow: hidden;
}

.popShort {
	width: 80%;
	border-radius: 50upx;
	background: #ffffff;
	overflow: hidden;
}

.popItem {
	height: 88upx;
	line-height: 88upx;
	text-align: center;
	color: #666666;
	font-size: 36upx;
	border-top: 2upx solid #e5e5e5;
}

.popItem:first-child {
	border-top: none;
}

.popActive {
	color: #ff9900;
}

/* 下拉框 */
/* 表格 */
$view-table-border-color: rgba(229, 229, 229, 1);
$view-table-border-width: 1upx;

.table {
	position: relative;
	display: table;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-bottom: $view-table-border-width solid $view-table-border-color;
	background: #ffffff;

	.date {
		display: flex;
		justify-content: flex-end;
		font-size: 18upx;
		color: #333333;
		margin-bottom: 15upx;
	}

	.time {
		display: flex;
		justify-content: flex-start;
		font-size: 18upx;
		color: #333333;
		margin-left: 10upx;
	}

	.wuxi {
		width: 89.9% !important;
		text-align: center;
		color: #333333 !important;
		font-size: 24upx !important;
	}

	.table-tr {
		display: table-row;
	}

	.table-td {
		display: table-cell;
	}

	.sub-table {
		width: 100%;
		display: table;
	}

	.sub-table-tr {
		display: table-row;

		.sub-table-td {
			width: 10.9%;
			display: table-cell;
			vertical-align: middle;
			height: 110upx;
			border-right: $view-table-border-width solid $view-table-border-color;
			border-left: $view-table-border-width solid $view-table-border-color;
			border-top: $view-table-border-width solid $view-table-border-color;

			view {
				font-size: 20upx;
				// color: #333333;
				line-height: 25upx;
				text-align: center;
			}

			i {
				color: #ff7171;
				position: relative;
				top: 10upx;
				left: 29upx;
				font-size: 60upx;
				line-height: 0;
			}

			.subject {
				// color: #333333;
				font-size: 23upx;
				margin-top: 30upx;
			}

			.yuan {
				width: 10upx;
				height: 10upx;
				border-radius: 50%;
				background: #ff7171;
				margin: auto;
				margin-top: 20upx;
			}

			& + .sub-table-td {
				width: 12.7%;
				border-left: none;
			}

			.addsubject {
				view {
					color: #c2c2c2 !important;
					font-size: 22upx !important;
					line-height: 30upx !important;
				}
			}
		}

		.table-th {
			width: 10.9%;
			display: table-cell;
			vertical-align: middle;
			height: 100upx;

			& + .table-th {
				width: 12.7%;
				border-left: none;
			}

			.th-top {
				text-align: center;
				font-size: 28upx;
				color: #333333;
			}

			.th-bottom {
				font-size: 20upx;
				text-align: center;
				color: #666666;
			}
		}
	}
}

/* 激活样式 */
.th-active {
	color: #00d5a2 !important;
}

/* 单个属性 */
.td-width {
	margin: auto;
	width: 64upx;
}

.dib {
	display: inline-block;
	width: 64upx;
}

/* 下拉选择容器 */
.cs-select-x {
	display: flex;
}
</style>
